<template>
	<div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="path" label="路径" :width="220"></el-table-column>
			<el-table-column prop="cpu" label="CPU(m)" :width="90"></el-table-column>
			<el-table-column prop="memory" label="内存(Mi)" :width="90"></el-table-column>
			<el-table-column prop="latency" label="时延(ms)" ></el-table-column>
		</el-table>
  </div>
  <div class="bottom">
	<p class="textstyle content">决策结果：</p>
	<p class="textstyle content">{{content}}</p>
  </div>
</template>

<script>
	export default {
		data(){
			return{
				rawData: "",
				tableData: [],
				content: ""
			}
		},
		methods:{
			getData(){
				let that=this
				that.$axios.get("http://10.112.186.60:8080/D:/weixingzu/files/View3/rightdown.csv").then(function(res) {
					that.rawData=res.data;
					that.processData()
				})
				that.$axios.get("http://10.112.186.60:8080/D:/weixingzu/files/View3/leftdowndown.csv").then(function(res) {
					// console.log(res.data)
					that.content=res.data;
				}).catch(function (error) {
					that.content = "";
				})
			},
			processData() {
				this.tableData = this.rawData.map(item => {
					// 将 path 数组转换为以“-”连接的字符串
					const pathString = item.path.join("-");
					// 返回一个新的对象，包含转换后的 path 字符串和其他属性
					return {
						path: pathString,
						cpu: item.cpu,
						memory: item.memory,
						latency: item.latency
					};
				});
			},
			switper(){
				let that=this
				that.getData()
				var timerID=setInterval(()=>that.getData(), 3000)
			},
		},
		created() {
			this.switper();
		}
	}
</script>

<style lang="scss" scoped>
	@import "./table.scss";
	.textstyle{
		display: inline;
		white-space:pre-wrap;
		font-size:24px;
		line-height: 150%;
		font-weight: bold;
	}
	.result{
		color: #013a89;
	}
	.content{
		color: #FF7F00;
	}

	table {
		border-collapse: collapse;
		width: 100%;
	}

	th, td {
		text-align: left;
		padding: 8px;
	}
	.bottom{
		position: absolute;
		bottom: 10px;
	}
</style>
